<template>
  <div class="rolePage">
    <!-- <el-button
      class="addBtn"
      type="primary"
      icon="el-icon-plus"
      @click="addUserRole()"
      >新增用户</el-button
    > -->
    <div class="routeName">{{ $route.name }}</div>
    <div class="searchBox">
      <div>
        <el-select
          v-model="params.roleId"
          class="searchInp"
          @change="search()"
          placeholder="请选择角色"
          clearable
        >
          <el-option
            v-for="item in userRole"
            :key="item.id"
            :label="item.roleName"
            :value="item.roleId"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-input
          class="searchInp greyBackground"
          v-model="params.userName"
          @input="search()"
          placeholder="搜索用户名"
          suffix-icon="el-icon-search"
        ></el-input>
        <!-- <el-button
          class="searchBtn"
          type="primary"
          icon="el-icon-search"
          @click="search()"
          >查 询</el-button
        > -->
        <el-button type="primary" class="addBtn greenBtn" @click="addUserRole()">
          <i class="el-icon-plus"></i>
          添加成员
        </el-button>
      </div>
    </div>
    <div class="roleTable">
      <el-table
        class="list tableNewBox"
        :data="userList"
      >
        <el-table-column label="序号">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名">
          <template slot-scope="scope">
            <span>{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限">
          <template slot-scope="scope">
            <span>{{ scope.row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="250">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              class="greenButton"
              icon="el-icon-edit"
              @click="openDetail(scope.row)"
              >
              编辑
            </el-button>
            <el-button
              size="mini"
              class="redButton"
              icon="el-icon-delete"
              type="text"
              @click="delUserById(scope.row.userId)"
              >删除</el-button
            >
            <!-- <el-popconfirm
              title="确定删除吗？"
              @confirm="delUserById(scope.row.userId)"
            >
              <el-button
                size="mini"
                type="danger"
                slot="reference"
                style="margin-left: -0.8vw"
                >删除</el-button
              >
            </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        @current-change="getUserPage"
        :current-page.sync="params.current"
        :page-size="params.pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      width="460px"
      class="dialogClass"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
      v-if="dialogOver"
      :visible.sync="dialogOver"
    >
      <div class="dialogHeader mb20">
        <div>{{ userInfo && userInfo.userId ? '成员信息' : '添加成员' }}</div>
        <i class="el-icon-close" @click="dialogOver = false"></i>
      </div>
      <agriRoleAdd ref="agriRoleAdd" @resetting="resetting"/>
      <div class="dialogFooter">
        <el-button
          size="small"
          class="editBtn editBtnNone"
          v-if="userInfo && userInfo.userId"
          @click="delUserById(userInfo.userId)"
          >删除</el-button
        >
        <el-button
          class="editBtn"
          type="primary"
          size="small"
          @click="submitOver()"
          >
          完成
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserPageApi, delUserByIdApi, getRoleInfoApi } from '@/api/user'
import agriRoleAdd from '@/views/agriRoleAdd/index'
export default {
  name: 'SevencolorUserIndex',
  components: {
    agriRoleAdd
  },
  data () {
    return {
      userList: null,
      params: {
        current: 1,
        pageSize: 8,
        baseId: 1,
        roleId: null,
        userName: null
      },
      userRole: [],
      setTime: null,
      dialogOver: false,
      total: 0
    }
  },

  mounted () {
    this.params.baseId = this.$store.getters.userInfo.baseId
    this.getUserPage()
    this.roleDict()
  },

  methods: {
    // 权限字典
    async roleDict () {
      const res = await getRoleInfoApi()
      this.userRole = res.data
    },
    // 列表
    async getUserPage () {
      const res = await getUserPageApi(this.params)
      this.userList = res.data.records
      this.total = res.data.total
    },
    // 查询
    search () {
      clearTimeout(this.setTime)
      this.setTime = setTimeout(() => {
        this.params.current = 1
        this.getUserPage()
      }, 300)
    },
    // 删除
    async delUserById (id) {
      // const res = await delUserByIdApi(id)
      // if (res.code === 200) {
      //   this.$message.success('删除成功')
      //   this.params.current = 1
      //   this.getUserPage()
      // }
      this.$alert(
        '',
        '确定删除员工信息吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'alertClass',
          showCancelButton: true,
          closeOnClickModal: false,
          showClose: false
        }).then(async () => {
        const res = await delUserByIdApi(id)
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.params.current = 1
          this.getUserPage(this.params)
        } else {
          this.$message.error('删除失败')
        }
      })
        .catch(action => {
        })
    },
    // 编辑
    openDetail (userInfo) {
      // this.$router.push({
      //   path: '/shuzhongtian/agriRoleAdd',
      //   query: { ...userInfo, pageId: 2 }
      // })
      this.userInfo = {
        pageId: 2,
        ...userInfo
      }
      this.dialogOver = true
      this.$nextTick(() => {
        this.$refs.agriRoleAdd.getData(this.userInfo)
      })
    },
    // 提交编辑
    submitOver () {
      this.$refs.agriRoleAdd.submitForm()
    },
    // 数据重置
    resetting () {
      this.dialogOver = false
      this.getUserPage()
    },
    addUserRole () {
      // this.$router.push({
      //   path: '/shuzhongtian/agriRoleAdd',
      //   query: { pageId: 1 }
      // })
      this.userInfo = this.$options.data().userInfo
      this.dialogOver = true
    }
  }
}
</script>
<style lang="scss" scoped>
.rolePage {
  width: 100%;
  height: 100%;
  position: relative;
  .searchBox {
    font-weight: 600;
    margin-bottom: 1.5vh;
    width: 100%;
    height: 11vh;
    line-height: 11vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    ::v-deep .el-select > .el-input {
      height: 3.5vw;
    }
    .searchInp {
      width: 16.4708vw;
      height: 0.75rem * 0.834;
      margin-right: 1vw;
    }
    .searchBtn {
      background-color: #6adfae;
      border: #80efb1;
      font-weight: 600;
      width: 5.8333vw;
      height: 3.125vw * 0.834;
    }
    .searchBtn:hover {
      background-color: #80efb1;
    }
  }
  .addBtn {
    text-align: right;
  }
  .roleTable {
    height: 63vh;
    overflow-y: auto;
    border-radius: 20px;
    background: #fff;
    padding:  0 0 1.0417vw 0;
    .addBtn {
      margin-bottom: 1.5625vw * 0.834;
    }
    .list {
      text-align: center;
    }
  }
}
.dialogClass {
  ::v-deep .el-dialog {
    margin-top: 12vh !important;
  }
  .dialogHeader {
    padding-top: 0;
    position: relative;
    .el-icon-close {
      position: absolute;
      right: 20px;
      top: 0;
      font-size: 20px;
    }
  }
}
.pagination {
  margin-top: 1.5625vw *0.834;
  text-align: right;
  margin-right: 2vw
}
</style>
